import { Button, Form, Input, Popconfirm } from "antd";
import {
  FieldTimeOutlined,
  DeleteOutlined,
  EditOutlined,
} from "@ant-design/icons";
import Save from "@/components/svg/action-slot-icon/Save";
import Add from "@/components/svg/action-slot-icon/Add";
import DeleteTwo from "@/components/svg/action-slot-icon/Delete_Two";
import CommonPage from "@/components/page/CommonPage";
import CrudTable from "@/components/table/CrudTable";
import QueryBarItem from "@/components/query-bar/QueryBarItem";

import styled from "styled-components";
import { formatDate } from "@/utils/common/common";
import useCRUD from "@/hooks/useCRUD";
import { useEffect, useRef } from "react";
import useGetState from "@/hooks/useGetState";
import {
  deleteCategory,
  getCategorys,
  saveOrUpdateCategory,
} from "@/api/category";
import CrudModal from "@/components/table/CrudModal";
const Styled = styled.div``;

const Category = () => {
  const {
    modalVisible,
    setModalVisible,
    modalTitle,
    modalLoading,
    setModalLoading,
    handleAdd,
    handleEdit,
    handleDelete,
    handleSave,
    modalForm,
    setModalForm,
    modalFormRef,
    tableSelections,
    setTableSelections,
    clearFormFields,
  } = useCRUD({
    name: "分类",
    initForm: {},
    refresh: () => {
      $table.current.handleSearch();
    },
    doCreate: saveOrUpdateCategory,
    doDelete: deleteCategory,
    doUpdate: saveOrUpdateCategory,
  });
  const $table = useRef();
  //搜索框参数
  const [queryItems, setQueryItems, getQueryItems] = useGetState({});
  function updateQueryItems(newQueryItems) {
    setQueryItems(newQueryItems);
  }
  const columns = [
    {
      title: "分类名",
      key: "name",
      dataIndex: "name",
      width: 100,
      align: "center",
    },
    {
      title: "文章量",
      key: "article_count",
      dataIndex: "article_count",
      width: 30,
      align: "center",
    },
    {
      title: "创建日期",
      key: "created_at",
      dataIndex: "created_at",
      width: 80,
      align: "center",
      render(text, record, index) {
        return (
          <Button
            icon={<FieldTimeOutlined />}
            type="link"
            size="small"
            style={{ color: "#333" }}
          >
            {formatDate(record.create_at)}
          </Button>
        );
      },
    },
    {
      title: "更新日期",
      key: "updated_at",
      dataIndex: "updated_at",
      width: 80,
      align: "center",
      render(text, record, index) {
        return (
          <Button
            icon={<FieldTimeOutlined />}
            type="link"
            size="small"
            style={{ color: "#333" }}
          >
            {formatDate(record.update_at)}
          </Button>
        );
      },
    },
    {
      title: "操作",
      key: "actions",
      dataIndex: "actions",
      width: 100,
      align: "center",
      fixed: "right",
      render(text, record, index) {
        return (
          <>
            <Button
              type="primary"
              style={{ marginRight: "5px" }}
              icon={<EditOutlined />}
              onClick={() => {
                handleEdit(record);
              }}
            >
              编辑
            </Button>
            <Popconfirm
              title="确认删除该标签吗"
              description="删除后可在回收站中查看"
              onConfirm={() => {
                handleDelete([record.id]);
              }}
              okText="确认"
              cancelText="取消"
            >
              <Button
                type="primary"
                icon={<DeleteOutlined />}
                style={{ backgroundColor: "#D03050FF" }}
              >
                删除
              </Button>
            </Popconfirm>
          </>
        );
      },
    },
  ];

  useEffect(() => {
    $table.current.handleSearch();
  }, []);

  return (
    <Styled>
      <CommonPage title="分类管理">
        <div className="action-slot" slot="action">
          <Button
            type="primary"
            style={{ backgroundColor: "rgba(49, 108, 114, 0.4)" }}
            icon={<Save />}
            onClick={() => $table.current.handleExport()}
          >
            导出
          </Button>
          <Button type="primary" icon={<Add />} onClick={handleAdd}>
            新建分类
          </Button>
          <Button
            type="primary"
            danger
            icon={<DeleteTwo />}
            disabled={tableSelections.length ? false : true}
            onClick={() => {
              handleDelete(tableSelections);
            }}
          >
            批量删除
          </Button>
        </div>
        {/* 表格区域 */}
        <CrudTable
          ref={$table}
          getData={getCategorys}
          columns={columns}
          queryItems={queryItems}
          updateQueryItems={updateQueryItems}
          getQueryItems={getQueryItems}
          setTableSelections={setTableSelections}
        >
          <div className="queryBar-slot flex label-ml-15" slot="queryBar">
            <QueryBarItem label="分类名" labelWidth={50}>
              <Input
                placeholder="请输入分类名"
                allowClear
                value={queryItems.keyword}
                onChange={(e) => {
                  setQueryItems({
                    ...queryItems,
                    keyword: e.target.value,
                  });
                }}
              />
            </QueryBarItem>
          </div>
        </CrudTable>
        <CrudModal
          visible={modalVisible}
          setModalVisible={setModalVisible}
          loading={modalLoading}
          title={modalTitle}
          handleSave={handleSave}
          clearFormFields={clearFormFields}
        >
          <Form
            form={modalFormRef}
            name="category-list"
            labelAlign="left"
            labelCol={{
              span: 4,
            }}
            wrapperCol={{
              span: 20,
            }}
            initialValues={{
              name: "",
            }}
          >
            <Form.Item
              label="文章分类"
              name="name"
              validateTrigger={["onBlur", "onChange"]}
              rules={[
                {
                  required: true,
                  message: "请选择文章分类",
                },
              ]}
            >
              <Input
                placeholder="请输入标签"
                value={modalForm.name}
                onBlur={(e) => {
                  setModalForm({
                    ...modalForm,
                    name: e.target.value,
                  });
                }}
              />
            </Form.Item>
          </Form>
        </CrudModal>
      </CommonPage>
    </Styled>
  );
};

export default Category;
